// +----------------------------------------------------------------------
// | 选择支付方式弹窗
// +----------------------------------------------------------------------

// 用法
// showDialog<Null>(
//   context: context, //BuildContext对象
//   barrierDismissible: false,
//   builder: (BuildContext context) {
//     return PaymentMethod(
//       link: 'https://www.baidu.com',
//       tips: '更新一堆乱七八糟的东西',
//       isNotForce: true, // 不是强更
//     );
//   },
// );

import 'package:flutter/material.dart';
import 'package:qgchat/states/states_model/user.dart';
import '../common/global/global.dart';

class PaymentMethod extends Dialog {
  PaymentMethod(
    this.alipay,
    this.goldpay,
    this.manageAccount, {
    Key key,
  }) : super(key: key);

  final Function alipay;
  final Function goldpay;
  final Function manageAccount;

  // 点返回键或阴影部分会做些什么...
  _goBack(context) {
    Navigator.of(context).pop();
  }

    @override
  Widget build(BuildContext context) {
    UserState userState = (state(context, 'user') as UserState);

    return Material(
      //创建透明层
      type: MaterialType.transparency,
      child: Stack(
        fit: StackFit.loose,
        children: <Widget>[
          GestureDetector(onTap: () => _goBack(context)),
          Center(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: px(120),
                maxHeight: px(543),
              ),
              child: Container(
                width: px(660),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(px(18)),
                ),
                child: Column(
                  children: <Widget>[
                    titleHandle(context),
                    payMethodHandle(
                      context,
                      "assets/images/icon/alipay.png",
                      "支付宝 ",
                      alipay,
                      subTitle: " (${userState.alipay.alipayUser ?? '暂未绑定支付宝'})",
                    ),
                    payMethodHandle(
                      context,
                      "assets/images/icon/star.png",
                      "等值金币",
                      goldpay,
                    ),
                    moreActionHandle(
                      context,
                      "管理我的账号",
                      manageAccount,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 弹出头
  Widget titleHandle(context) {
    return Container(
      height: px(120),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: col("edeff2"),
            width: 1,
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            width: px(104),
            height: px(104),
            child: FlatButton(
              onPressed: () {
                _goBack(context);
              },
              padding: EdgeInsets.zero,
              child: Image.asset(
                "assets/images/icon/close.png",
                color: col("606266"),
                width: px(32),
                height: px(32),
              ),
            ),
          ),
          Text(
            "选择到账方式",
            style: TextStyle(
              color: col("303133"),
              fontSize: px(38),
              fontWeight: FontWeight.bold,
            ),
          ),
          Container(
            width: px(104),
            height: px(104),
          ),
        ],
      ),
    );
  }

  // 选择支付方式构造函数
  Widget payMethodHandle(
    BuildContext context,
    String icon,
    String title,
    Function action, {
    String subTitle = "",
  }) {
    return Container(
      height: px(140),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: col("edeff2"),
            width: 1,
          ),
        ),
      ),
      child: FlatButton(
        onPressed: () {
          Navigator.pop(context);
          action();
        },
        padding: EdgeInsets.symmetric(horizontal: px(40)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(right: px(15)),
                    child: Image.asset(
                      "$icon",
                      width: px(60),
                      height: px(60),
                    ),
                  ),
                  RichText(
                    text: TextSpan(
                      text: "$title",
                      style: TextStyle(
                        color: col("303133"),
                        fontSize: px(34),
                      ),
                      children: <TextSpan>[
                        TextSpan(
                          text: "$subTitle",
                          style: TextStyle(
                            color: col("606266"),
                            fontSize: px(34),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            Image.asset(
              "assets/images/icon/right.png",
              width: px(14),
              height: px(26),
              fit: BoxFit.cover,
              color: col("606266"),
            ),
          ],
        ),
      ),
    );
  }

  // 其他功能键构造函数
  Widget moreActionHandle(
    BuildContext context,
    String title,
    Function action,
  ) {
    return Container(
      height: px(140),
      child: FlatButton(
        onPressed: () {
          Navigator.pop(context);
          goPage(context, '/manageAccount');
          action();
        },
        padding: EdgeInsets.symmetric(horizontal: px(40)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Row(
                children: <Widget>[
                  Container(
                    width: px(60),
                    height: px(60),
                    margin: EdgeInsets.only(right: px(15)),
                  ),
                  RichText(
                    text: TextSpan(
                      text: "$title",
                      style: TextStyle(
                        color: col("303133"),
                        fontSize: px(38),
                      ),
                    ),
                  )
                ],
              ),
            ),
            Image.asset(
              "assets/images/icon/right.png",
              width: px(14),
              height: px(26),
              fit: BoxFit.cover,
              color: col("606266"),
            ),
          ],
        ),
      ),
    );
  }

}
